<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="resource-label-container">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="form.keyword" placeholder="分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="searchData">搜索</el-button>
                    <el-button @click="add" class="add-label">添加分类</el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-show="tableData.length"
                :data="tableData"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                style="width: 100%;">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
<!--                <el-table-column-->
<!--                    prop="date"-->
<!--                    label="排序">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-input v-model="scope.row.sort"></el-input>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                    prop="name"
                    label="分类名称"
                    width="360">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.show" class="label-name">{{ scope.row.name }}<i class="el-icon-edit" @click="editName(scope.row)"></i></span>
                        <el-input v-else v-model="scope.row.name" :ref="`ref${scope.row.id}`" maxlength="20"
                                  @blur="inputBlur(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="关联标签">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="detailResource(scope.row)">查看所属标签</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="deleteData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="tableData.length === 0">
            </ask-empty-text>
        </div>
        <el-dialog
            title="添加分类"
            :close-on-click-modal="false"
            :visible.sync="showAddLabel"
            width="30%">
            <el-form ref="addForm" :inline="true" :model="addForm" :rules="addFormRules">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入分类名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeAddLabel">取 消</el-button>
                <el-button type="primary" @click="saveAddLabel">确 定</el-button>
            </div>
        </el-dialog>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize"
                        @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component
export default class ResourceCategory extends Vue {
    // 搜索条件
    form = {
        keyword: ""
    };

    // 添加分类表单
    addForm = {
        name: ""
    };

    // 显示添加分类弹窗
    showAddLabel = false;

    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 编辑前的名称
    oldName = "";
    // 表格数据
    tableData = []

    addFormRules = {
        name: [
            { required: true, message: '请输入分类名称', trigger: 'change' },
            { max: 20, message: '最多输入20个字符', trigger: 'change' }
        ]
    }

    created() {
        this.getTable();
    }

    // 添加
    add() {
        this.showAddLabel = true;
    };

    // 关闭添加弹框
    closeAddLabel() {
        (this.$refs.addForm as any).resetFields();
        this.showAddLabel = false;
    }

    // 保存添加模板
    saveAddLabel() {
        (this.$refs.addForm as any).validate(async(valid: any) => {
            if (valid) {
                const res = await this.$server["resource/category/addName"]({
                    data: {
                        name: this.addForm.name,
                        sort: 0
                    }
                });
                if (res.data.code === 200) {
                    this.closeAddLabel();
                    await this.getTable();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }

    // 点击查询
    searchData() {
        this.pageIndex = 1;
        this.getTable();
    };

    // 查询表格
    async getTable() {
        const res = await this.$server["resource/category/tableList"]({
            data: {
                pageSize: this.pageSize,
                currentPage: this.pageIndex,
                keyword: this.form.keyword
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records.map((item: any) => { return { ...item, show: false }; });
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 删除
    deleteData(row: any) {
        this.$confirm('是否确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async() => {
            const res = await this.$server["resource/category/delete"]({
                params: {
                    id: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                await this.getTable();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }

    // 编辑名称
    editName(row: any) {
        this.oldName = row.name;
        row.show = true;
        this.$nextTick(() => {
            (this.$refs[`ref${row.id}`] as any).$refs.input.focus();
        });
    }

    // 编辑框失去焦点
    async inputBlur(row: any) {
        row.name = row.name ? row.name : this.oldName;
        row.show = !row.show;
        this.oldName = "";
        if (!row.name) return false;
        const res = await this.$server["resource/category/update"]({
            data: {
                id: row.id,
                name: row.name,
                sort: null
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            await this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 查看资源所属维度
    detailResource(row: any) {
        this.$router.push({ path: "/resource-manage/category/resource-details", query: { labelId: row.id, name: row.name } });
    }

    // 查看模板
    detailTemplate(row: any) {
        this.$router.push({ path: "/resource-manage/category/template-details", query: { labelId: row.id, name: row.name } });
    }
}
</script>

<style scoped lang="scss">
.resource-label-container {
    .add-label {
        margin-bottom: 10px;
    }

    .label-name {
        i {
            width: 12px;
            margin-left: 8px;
            cursor: pointer;
        }
    }
}
</style>
